<div class="container">
  <h1>响应式表单</h1>
  
  <form [formGroup]="heroForm">
    <div class="form-group">
      <label for="name">Name</label>
      <input id="name" class="form-control" formControlName="name" required>

      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        <div *ngIf="name.errors.required">
          Name is required.
        </div>
        <div *ngIf="name.errors.minlength">
          Name must be at least 4 characters long.
        </div>
        <div *ngIf="name.errors.forbiddenName">
          Name cannot be Bob.
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="alterEgo">Alter Ego</label>
      <input id="alterEgo" class="form-control" formControlName="alterEgo">

      <!-- <div *ngIf="alterEgo.pending">Validating...</div>
      <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
        <div *ngIf="alterEgo.errors?.uniqueAlterEgo">
          Alter ego is already taken.
        </div>
      </div> -->
    </div>
    
    <div
      *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)"
      class="cross-validation-error-message alert alert-danger"
    >
      Name cannot match alter ego.
    </div>
  </form>
</div>